<template>
  <div :style="{height: lastHeight + 'px', overflow:'auto' }">
    <el-card  shadow="never" style="width: 99%;margin-top: 12px;margin-left: 12px;float: left"
             :style="{height: lastHeight-30 + 'px'}">
      <span slot="header">
        <span style="font-weight: bold">{{name}}趋势图</span>
      </span>
      <echart :style="{height:lastHeight-40+'px'}" style="margin-top: -40px" :option="option" />
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      option:{
        tooltip: {
          trigger: "axis"
        },
        legend: {
          x: "right",
          y: "top",
          top: "3%",
          data: []
        },
        grid: {
          left: "2%",
          right: "3%",
          bottom: "12%",
          top: "8%"
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: []
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed" // 设置背景线为虚线
            }
          },
          type: "value",
          boundaryGap: [0, "30%"]
        },
        series: []
      }
    };
  },
  methods: {
    getEchartData() {
      this.$http.post("/statistics/statusCount").then((res) => {
        this.option.xAxis.data =  res.data[0].xAxisData
        res.data.forEach((item)=>{
          this.option.series.push(
          {
            name: item.name,
            showSymbol: false,
            data: item.data,
            type: "line",
            smooth: true
          }
          )
        })
      }).finally(() => {
      });
    }
  },
  computed: {
    documentHeight() {
      return this.$store.getters.documentHeight;
    },
    lastHeight() {
      return this.documentHeight - 70;
    }
  },
  mounted() {
    this.getEchartData();
  }
};
</script>